<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList1" @Launchform="Launchform" @findClicked="findClicked" @clickNumber="clickNumber" />

    <el-card shadow="always" :body-style="{ padding: '5px' }">
      <div style="display: flex">
        <div style="width: 50%">
          <h1>{{ $t(`Print.TheMaterialDetailsToBePutIntoTheRemainingSilos`) }}</h1>
          <Table
            :isLoading="isLoading7"
            @currentRow="clicktogetdata6"
            :tableHeader="tableHeader"
            @inputChange="inputChange"
            :tableData="RemainingBinDetailsMethodsPamrs"
            :TableHeight="100"
            :outTableHeight="50"
          />
        </div>
        <div style="width: 50%; margin-left: 10px">
          <h1>{{ $t(`Print.TransferTheMaterialDetailsOfTheSiloToTheLeftovers`) }}</h1>
          <Table
            :isLoading="isLoading8"
            @currentRow="clicktogetdata7"
            :tableHeader="tableHeader1"
            :tableData="BringInResidualNinDetailsMedhotsTableDateList"
            :TableHeight="100"
            :outTableHeight="50"
          />
        </div>
      </div>
      <PageModule :PageData="{ pageSizeShow: true }" />
    </el-card>

    <el-drawer v-model="drawer2" :direction="'ttb'" size="small" :with-header="false">
      <span @click="drawer2 = false" style="float: right; cursor: pointer; color: rgb(7, 7, 7)">X</span>
      <h1>{{ $t(`Print.QueryCondition`) }}</h1>
      <Find
        :OriginalFilter="{ static: true }"
        :searchImg="false"
        :formList="formList3"
        @Launchform="Launchform1"
        @findClicked="findClicked1"
        @clickNumber="clickNumber1"
      />
      <Table
        :isLoading="isLoading1"
        :tableHeader="tableHeader5"
        :tableData="InventoryMaterialInquiryMethodsParmsTableDateList.dtos"
        :selection="true"
        :TableHeight="100"
        :outTableHeight="55"
        @selectList="selectList5"
      />
      <PageModule :PageData="{ total }" @pageSizeChange="handleSizeChangeTk" @pageChange="handleCurrentChangeTk" />
    </el-drawer>

    <el-drawer v-model="drawer3" :direction="'ttb'" size="small" :with-header="false">
      <span @click="drawer3 = false" style="float: right; cursor: pointer; color: rgb(7, 7, 7)">X</span>
      <h1>{{ $t(`Print.QueryCondition`) }}</h1>
      <Find :OriginalFilter="{ static: true }" :searchImg="false" :formList="formList2" @Launchform="Launchform3" @findClicked="findClicked5" />
      <Table
        :isLoading="isLoading2"
        style="margin-top: 10px"
        :tableHeader="tableHeader6"
        :tableData="LotNoQueryMethodsTableDateList.dtos"
        :selection="true"
        :TableHeight="100"
        :outTableHeight="55"
        @selectList="selectList6"
      />
      <PageModule :PageData="{ total: totalList }" @pageSizeChange="handleSizeChange" @pageChange="handleCurrentChange" />
    </el-drawer>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'TransferLeftoverMaterialsInto'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { classifyQuery } from '@/api/WarehouseDepartment/FactoryStorage/FitOutsourcingProcessing'
import {
  TurnOverTheBin,
  BringInResidualNinDetails,
  RemainingBinDetails,
  SurplusCause,
  InventoryMaterialInquiry,
  TransferToPendingStorage,
  MaterialToBeRemovedFromRemainingBin,
  RemovedFromRemainingBin,
  LotNoQuery
} from '@/api/WarehouseDepartment/FactoryStorage/TransferLeftoverMaterialsInto'
import type {
  BringInResidualNinDetailsParms,
  BringInResidualNinDetailsTableDateLit,
  RemainingBinDetailsInterface,
  InventoryMaterialInquiryParms,
  InventoryMaterialInquiryInterface,
  LotNoQueryInterface,
  LotNoQueryParms
} from '@/api/WarehouseDepartment/FactoryStorage/TransferLeftoverMaterialsInto'
import { ref, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { ElMessageBox } from 'element-plus'
import LoginWork from '@/utils/LoginWork'
import service from '@/utils/request'
const isLoading7 = ref(false)
const isLoading8 = ref(false)
const isLoading1 = ref(false)
const isLoading2 = ref(false)
const formList1 = ref([
  {
    type: 'button',
    checkboxLabel: '库存材料'
  },
  {
    type: 'button',
    checkboxLabel: '指令材料'
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '剩料原因 ',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'button',
    checkboxLabel: '转剩料仓'
  },
  {
    type: 'input',
    inputPlaceholder: '单据号码',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '剩料原因',
    selectLabel: '',
    selectOptions: []
  },

  {
    type: 'date',
    dateLabel: '转入日期',
    dateValue: ''
  },

  {
    type: 'radio',
    checkboxLabel: '全部',
    checked: true,
    label: '1'
  },
  {
    type: 'radio',
    checkboxLabel: '剩料仓未确认',
    checked: false,
    label: '2'
  },
  {
    type: 'radio',
    checkboxLabel: '剩料仓已确认',
    checked: false,
    label: '3'
  },
  {
    type: 'button',
    checkboxLabel: '删除待入剩料仓材料'
  },
  {
    type: 'button',
    checkboxLabel: '删除转剩料仓材料明细'
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  }
])

const formList3 = ref([
  {
    type: 'input',
    inputPlaceholder: '物料编码',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '分类',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'input',
    inputPlaceholder: '材料名称',
    inputValue: ''
  },
  {
    type: 'radio',
    checkboxLabel: '全部',
    checked: true,
    label: '1'
  },
  {
    type: 'radio',
    checkboxLabel: '大于0',
    checked: false,
    label: '2'
  },
  {
    type: 'radio',
    checkboxLabel: '等于0',
    checked: false,
    label: '3'
  },
  {
    type: 'button',
    checkboxLabel: '打勾记录插入'
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  }
])

const formList2 = ref([
  {
    type: 'input',
    inputPlaceholder: '指令',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '型体',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '分类',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'input',
    inputPlaceholder: '材料名称',
    inputValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '待入批处理'
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  }
])

const clearFormList3 = () => {
  formList2.value.forEach((item) => {
    if (item.type === 'input') {
      item.inputValue = ''
    }
    if (item.type === 'select') {
      item.selectValue = ''
    }
  })
}

const clearFormList5 = () => {
  formList3.value.forEach((item) => {
    if (item.type === 'input') {
      item.inputValue = ''
    }
    if (item.type === 'select') {
      item.selectValue = ''
    }
  })
}

// 待入修改
const inputChange = async (row: any) => {
  const result = await LoginWork.put<any, any>(
    `/pcFactorStockQuery/surpTempUpdate`,
    [row].map((item: any) => {
      item.qty = Number(item.qty)
      return item
    })
  )
  if (result.code === 200) {
    RemainingBinDetailsMethods()
    JMessage.success(result.message)
  } else {
    RemainingBinDetailsMethods()
    JMessage.error(result.message)
  }
}

// 转入剩料仓
const mtlNo5 = ref()
const slipReason = ref()

const TurnOverTheBinMethods = async () => {
  const result = await TurnOverTheBin(mtlNo5.value, slipReason.value)
  if (result.code === 200) {
    mtlNo5.value = undefined
    slipReason.value = undefined
    BringInResidualNinDetailsMedhots()
    RemainingBinDetailsMethods()
    JMessage.success(result.message)
  } else {
    mtlNo5.value = undefined
    slipReason.value = undefined
    JMessage.error(result.message)
  }
}

// 分类三级
const TransferToPendingStorageMehtod1KlParms = ref([])

const TransferToPendingStorageMehtod1Kl = async () => {
  const result = await TransferToPendingStorage(TransferToPendingStorageMehtod1KlParms.value)
  if (result.code === 200) {
    LotNoQueryMethods()
    RemainingBinDetailsMethods()
    TransferToPendingStorageMehtod1KlParms.value = []
    JMessage.success(result.message)
  } else {
    LotNoQueryMethods()
    TransferToPendingStorageMehtod1KlParms.value = []
    JMessage.error(result.message)
  }
}

const selectList6 = (row: any) => {
  TransferToPendingStorageMehtod1KlParms.value = row.map((item: any) => {
    return item
  })
}

const findClicked5 = (row: string) => {
  if (row === '待入批处理') {
    if (TransferToPendingStorageMehtod1KlParms.value.length === 0) {
      JMessage.warning('请选择需要批处理的数据')
    } else {
      TransferToPendingStorageMehtod1Kl()
    }
  }
  if (row === '置空') {
    clearFormList3()
  }
}

const getMtlType = async () => {
  let NewArray = []
  const result = await service.post<any, any>(`/back/getMtlType?levelCode=${3}`)
  NewArray = result.reduce((arr: any, item: any) => {
    if (item.typeNo && item.typeName) {
      // 只添加非空的 typeName 和 typeNo
      arr.push(item.typeNo + ' ' + item.typeName)
    }
    return arr
  }, [])
  formList2.value[2].selectOptions = EvaluatesTheArrayReturnValue(NewArray)
}

// 指令明细
const drawer3 = ref(false)

const Launchform3 = (row: any) => {
  LotNoQueryMethodsParms.value.lotNo = row[0].inputValue
  LotNoQueryMethodsParms.value.style = row[1].inputValue
  LotNoQueryMethodsParms.value.typeNo = row[2].selectValue.split(' ')[0]
  LotNoQueryMethodsParms.value.mtlName = row[3].inputValue
  LotNoQueryMethods()
}

const LotNoQueryMethodsParms = ref<LotNoQueryParms>({
  lotNo: '',
  mtlName: '',
  pageNum: 1,
  pageSize: 40,
  style: '',
  typeNo: ''
})

const LotNoQueryMethodsTableDateList = ref<LotNoQueryInterface>({
  dtos: []
})

const LotNoQueryMethods = async () => {
  isLoading2.value = true
  const result = await LotNoQuery(LotNoQueryMethodsParms.value)
  LotNoQueryMethodsTableDateList.value.dtos = result.dtos.map((item: any) => {
    if (item.cfmFlag === 'Y') {
      item.backgroundColor = '#80FF00' as any
    }
    return item
  })
  totalList.value = result.total!
  isLoading2.value = false
}

const totalList = ref(0)

const handleSizeChange = (val: number) => {
  LotNoQueryMethodsParms.value.pageSize = val
  LotNoQueryMethods()
}

const handleCurrentChange = (val: number) => {
  LotNoQueryMethodsParms.value.pageNum = val
  LotNoQueryMethods()
}

// 转剩料仓材料删除
const clicktogetdata7 = (row: any) => {
  const { mtlNo, slipNo } = row
  console.log(mtlNo)
  mtlNo2.value = mtlNo
  slipNo2.value = slipNo
}

const mtlNo2 = ref()
const slipNo2 = ref()

const RemovedFromRemainingBinMethods = async () => {
  const result = await RemovedFromRemainingBin(mtlNo2.value, slipNo2.value)
  if (result.code === 200) {
    BringInResidualNinDetailsMedhots()
    mtlNo2.value = undefined
    slipNo2.value = undefined
    JMessage.success(result.message)
  } else {
    mtlNo1.value = undefined
    JMessage.error(result.message)
  }
}

const handleCloseMateriaLKlc2 = (_done?: () => void) => {
  ElMessageBox.confirm('确认要删除该数据吗?')
    .then(async () => {
      RemovedFromRemainingBinMethods()
    })
    .catch(() => {})
}

// 待入剩料仓材料明细删除
const mtlNo1 = ref()

const clicktogetdata6 = (row: any) => {
  const { mtlNo } = row
  mtlNo1.value = mtlNo
  mtlNo5.value = mtlNo
}

const MaterialToBeRemovedFromRemainingBinMethods = async () => {
  const result = await MaterialToBeRemovedFromRemainingBin(mtlNo1.value)
  if (result.code === 200) {
    RemainingBinDetailsMethods()
    mtlNo1.value = undefined
    JMessage.success(result.message)
  } else {
    mtlNo1.value = undefined
    JMessage.error(result.message)
  }
}

const handleCloseMateriaLKlc3 = (_done?: () => void) => {
  ElMessageBox.confirm('确认要删除该数据吗?')
    .then(async () => {
      MaterialToBeRemovedFromRemainingBinMethods()
    })
    .catch(() => {})
}

// 待入仓新增
const ListAdd = ref([])

const selectList5 = (row: any) => {
  ListAdd.value = row.map((item: any) => {
    return item
  })
}

const TransferToPendingStorageMethods = async () => {
  const result = await TransferToPendingStorage(ListAdd.value)
  if (result.code === 200) {
    InventoryMaterialInquiryMethods()
    RemainingBinDetailsMethods()
    ListAdd.value = []
    JMessage.success(result.message)
  } else {
    InventoryMaterialInquiryMethods()
    ListAdd.value = []
    JMessage.error(result.message)
  }
}

// 库存材料
const classifyQueryMethods = async () => {
  let NewArray = []
  const result = await classifyQuery()
  NewArray = result.reduce((arr: any, item: any) => {
    if (item.typeNo && item.typeName) {
      // 只添加非空的 typeName 和 typeNo
      arr.push(item.typeNo + ' ' + item.typeName)
    }
    return arr
  }, [])
  formList3.value[1].selectOptions = EvaluatesTheArrayReturnValue(NewArray)
}

const drawer2 = ref(false)

watch(drawer2, (oldValue, newValue) => {
  if (!drawer2.value) {
    InventoryMaterialInquiryMethodsParmsTableDateList.value.dtos = []
  }
})

const Launchform1 = (row: any) => {
  InventoryMaterialInquiryMethodsParms.value.mtlNo = row[0].inputValue
  InventoryMaterialInquiryMethodsParms.value.mtlName = row[2].inputValue
  InventoryMaterialInquiryMethodsParms.value.mtlType = row[1].selectValue.split(' ')[0]
  InventoryMaterialInquiryMethods()
}

const findClicked1 = (row: any) => {
  if (row === '打勾记录插入') {
    if (ListAdd.value.length === 0) {
      JMessage.warning('请选择有效数据')
    } else {
      TransferToPendingStorageMethods()
    }
  }
  if (row === '置空') {
    clearFormList5()
  }
}

const clickNumber1 = (row: number) => {
  InventoryMaterialInquiryMethodsParms.value.stkFlag = row
  InventoryMaterialInquiryMethods()
}

const total = ref(0)

const handleSizeChangeTk = (val: number) => {
  InventoryMaterialInquiryMethodsParms.value.pageSize = val
  InventoryMaterialInquiryMethods()
}

const handleCurrentChangeTk = (val: number) => {
  InventoryMaterialInquiryMethodsParms.value.pageNum = val
  InventoryMaterialInquiryMethods()
}

const InventoryMaterialInquiryMethodsParms = ref<InventoryMaterialInquiryParms>({
  mtlColor: '',
  mtlName: '',
  mtlNo: '',
  mtlType: '',
  pageNum: 1,
  pageSize: 40,
  stkFlag: 1
})

const InventoryMaterialInquiryMethodsParmsTableDateList = ref<InventoryMaterialInquiryInterface>({
  dtos: []
})

const InventoryMaterialInquiryMethods = async () => {
  isLoading1.value = true
  const result = await InventoryMaterialInquiry(InventoryMaterialInquiryMethodsParms.value)
  InventoryMaterialInquiryMethodsParmsTableDateList.value.dtos = result.dtos
  total.value = result.total!
  isLoading1.value = false
}

// 剩料原因
const EvaluatesTheArrayReturnValue = (ArrayList: any) => {
  return ArrayList.map((item: any, index: any) => {
    return {
      optionKey: index,
      optionValue: item,
      optionLabel: item
    }
  })
}

const clickNumber = (value: number) => {
  BringInResidualNinDetailsMedhotsParms.value.type = value
  BringInResidualNinDetailsMedhots()
}

const SurplusCauseMethods = async () => {
  let NewArray = []
  const result = await SurplusCause()
  NewArray = result.reduce((arr: any, item: any) => {
    if (item.slipReason) {
      // 只添加非空的 typeName 和 typeNo
      arr.push(item.slipReason)
    }
    return arr
  }, [])
  formList1.value[2].selectOptions = EvaluatesTheArrayReturnValue(NewArray)
  formList1.value[5].selectOptions = EvaluatesTheArrayReturnValue(NewArray)
}

// 待入剩料仓材料明细
const RemainingBinDetailsMethodsPamrs = ref<RemainingBinDetailsInterface[]>()

const RemainingBinDetailsMethods = async () => {
  isLoading7.value = true
  const result = await RemainingBinDetails()
  RemainingBinDetailsMethodsPamrs.value = result.map((item: any) => {
    item.change = 'Y'
    item.disableConfirm = true
    return item
  })
  isLoading7.value = false
}

// 转剩料仓材料明细
const findClicked = (row: any) => {
  if (row === '库存材料') {
    drawer2.value = true
    InventoryMaterialInquiryMethods()
    classifyQueryMethods()
  }
  if (row === '指令材料') {
    drawer3.value = true
    LotNoQueryMethods()
    getMtlType()
  }
  if (row === '删除待入剩料仓材料') {
    if (mtlNo1.value === undefined) {
      JMessage.warning('请选择需要删除的数据')
    } else {
      handleCloseMateriaLKlc3()
    }
  }
  if (row === '删除转剩料仓材料明细') {
    if (mtlNo2.value === undefined || slipNo2.value === undefined) {
      JMessage.warning('请选择需要删除的数据')
    } else {
      handleCloseMateriaLKlc2()
    }
  }
  if (row === '转剩料仓') {
    if (mtlNo5.value === undefined || slipReason.value === undefined) {
      JMessage.warning('剩料原因不可为空并且需要选择数据')
    } else {
      TurnOverTheBinMethods()
    }
  }
  if (row === '置空') {
    clearFormList2()
  }
}

const clearFormList2 = () => {
  formList1.value.forEach((item) => {
    if (item.type === 'input') {
      item.inputValue = ''
    }
    if (item.type === 'select') {
      item.selectValue = ''
    }
    if (item.type === 'date') {
      item.dateValue = ''
    }
  })
}

const Launchform = (row: any) => {
  BringInResidualNinDetailsMedhotsParms.value.slipNo = row[4].inputValue
  BringInResidualNinDetailsMedhotsParms.value.slipReason = row[5].selectValue
  BringInResidualNinDetailsMedhotsParms.value.slipDateEnd = row[6].dateValue[1]
  BringInResidualNinDetailsMedhotsParms.value.slipDateStart = row[6].dateValue[0]
  slipReason.value = row[2].selectValue
  BringInResidualNinDetailsMedhots()
}

const BringInResidualNinDetailsMedhotsParms = ref<BringInResidualNinDetailsParms>({
  slipDateEnd: '',
  slipDateStart: '',
  slipNo: '',
  slipReason: '',
  type: 1
})

const BringInResidualNinDetailsMedhotsTableDateList = ref<BringInResidualNinDetailsTableDateLit[]>([])

const BringInResidualNinDetailsMedhots = async () => {
  isLoading8.value = true
  const result = await BringInResidualNinDetails(BringInResidualNinDetailsMedhotsParms.value)
  BringInResidualNinDetailsMedhotsTableDateList.value = result.map((item: BringInResidualNinDetailsTableDateLit) => {
    if (item.cfmFlag === 'Y') {
      item.cfmFlag = true
    }
    return item
  })
  isLoading8.value = false
}

// 统一调用接口
const interAceFunct = () => {
  BringInResidualNinDetailsMedhots()

  RemainingBinDetailsMethods()

  SurplusCauseMethods()
}

onMounted(() => {
  interAceFunct()
})

// 表格数据

const tableHeader = ref([
  {
    label: '材料名称',
    prop: 'mtlName',
    change: true
  },
  {
    label: '材料颜色',
    prop: 'mtlColor',
    change: true
  },
  {
    label: '规格',
    prop: 'mtlSpec',
    change: true
  },
  {
    label: '单位',
    prop: 'mtlUnit',
    change: true
  },
  {
    label: '库存量',
    prop: 'stkQty',
    change: true
  },
  {
    label: '数量',
    prop: 'qty'
  },
  {
    label: '备注',
    prop: 'remark'
  }
])

const tableHeader1 = ref([
  {
    label: '剩料仓确认',
    prop: 'cfmFlag',
    type: 'checkbox'
  },
  {
    label: '单据号码',
    prop: 'slipNo'
  },
  {
    label: '转入日期',
    prop: 'slipDate'
  },
  {
    label: '剩料原因',
    prop: 'slipReason'
  },
  {
    label: '材料颜色',
    prop: 'mtlColor'
  },
  {
    label: '材料名称',
    prop: 'mtlName'
  },
  {
    label: '规格',
    prop: 'mtlSpec'
  },
  {
    label: '单位',
    prop: 'mtlSpec'
  },
  {
    label: '数量',
    prop: 'qty'
  },
  {
    label: '备注',
    prop: 'remark'
  }
])

const tableHeader5 = ref([
  {
    label: '物料编码',
    prop: 'mtlNo'
  },
  {
    label: '颜色',
    prop: 'mtlColor'
  },
  {
    label: '材料名称',
    prop: 'mtlName'
  },
  {
    label: '规格',
    prop: 'mtlSpec'
  },
  {
    label: '单位',
    prop: 'mtlUnit'
  },
  {
    label: '库存量',
    prop: 'stkQty'
  }
])

const tableHeader6 = ref([
  {
    label: '指令',
    prop: 'lotNo'
  },
  {
    label: '物料编码',
    prop: 'mtlNo',
    backgroundColor: true
  },
  {
    label: '材料颜色',
    prop: 'mtlColor'
  },
  {
    label: '材料名称',
    prop: 'mtlName'
  },
  {
    label: '规格',
    prop: 'mtlSpec'
  },
  {
    label: '单位',
    prop: 'mtlUnit'
  },
  {
    label: '用量',
    prop: 'ttlUsage'
  },
  {
    label: '库存量',
    prop: 'stkQty'
  }
])
</script>

<style lang="less" scoped>
h1 {
  font-size: 16px;
}
</style>
